<template>
    <div id="wrap" v-cloak>
        <img class="lineTop" src="../../assets/images/witness/line_top.png" alt="">
        <img class="lineBottom" src="../../assets/images/witness/line-bottom.png" alt="">
        <p class="title">人证通</p>
        <!--内容区-->
        <div class="contentArea">
            <!--左右弧线-->
            <img class="arc_lf" src="../../assets/images/witness/arc_lf.png" alt="">
            <img class="arc_rg" src="../../assets/images/witness/arc_rg.png" alt="">
            <!--上下刻度-->
            <img class="scale_top" src="../../assets/images/witness/scale_top.png" alt="">
            <img class="scale_bottom" src="../../assets/images/witness/scale_bottom.png" alt="">
            <!--驼峰曲线-->
            <img class="humb_curve" src="../../assets/images/witness/humb_curve.png" alt="">
            <!--曲线-->
            <img class="curve_line" src="../../assets/images/witness/curve_line.png" alt="">
            <!--设置-->
            <div class="setting">
                <img  src="../../assets/images/witness/setting.png" alt="">
            </div>
            <!--close-->
            <div class="close" @click="$router.back(-1);">
                <img  src="../../assets/images/witness/close.png" alt="">
            </div>
            <!--中间-->
            <div class="witnessContext">
                <!--底座光-->
                <img class="light_bot" src="../../assets/images/witness/light_bot.png" alt="">
                <!--左装饰_40-->
                <img class="decorate_40" src="../../assets/images/witness/decorate_40.png" alt="">
                <!--右装饰_70-->
                <img class="decorate_70" src="../../assets/images/witness/decorate_70.png" alt="">
                <!--视频区域-->
                <div class="videoWrap">
                    <div class="video">
                        <img v-show="!videoShow" class="defaultp" src="../../assets/images/witness/defaultp.png" alt="">
                        <video id="video"  playsinline autoplay  :width="videoSize" :height="videoSize"  ref="video"></video>
                        <canvas id="canvas" ref="canvas"   :width="videoSize" :height="videoSize"></canvas>
                    </div>
                </div>
                <!--证件照-->
                <div :class="['idPhoto',{noPhoto:!idPhoto}]">
                    <!--线-->
                    <img class="circle_photo_line" src="../../assets/images/witness/circle_photo_line.png" alt="">
                    <!--箭头-->
                    <img src="../../assets/images/witness/arrow_right.png" alt="" class="arrowRight">
                    <!--默认图-->
                    <img v-show="!idPhoto" class="default_face" src="../../assets/images/witness/default_face_left.png" alt="">
                    <!--证件照-->
                    <img v-show="idPhoto" class="idPhotoImg" :src="idPhoto" alt="">
                </div>
                <!--现场照-->
                <div  :class="['scenePhoto',{noPhoto:!scenePhoto}]">
                    <!--线-->
                    <img class="circle_photo_line" src="../../assets/images/witness/circle_photo_line.png" alt="">
                    <!--箭头-->
                    <img src="../../assets/images/witness/arrow_left.png" alt="" class="arrow_left">
                    <!--默认图-->
                    <img v-show=" !scenePhoto" class="default_face" src="../../assets/images/witness/default_face_right.png" alt="">
                    <!--现场照-->
                    <img v-show="scenePhoto " class="scenePhotoImg" :src="scenePhoto" alt="">
                </div>
            </div>
            <!---->

        </div>
        <!--绘图现场照cancas-->
        <canvas id="sceneCanvas" ref="sceneCanvas"></canvas>
    </div>
</template>

<script>
    require("tracking")
    require("tracking/build/data/face")
    var tracking;
    var trackerTask ;
    export default {
        name: "witness",
        data(){
           return{
               //video和canvas大小,动态计算,因人脸识别需要识别标签上的width和height
               videoSize:0,
               videoinputArr:[],//usb设备信息
               videoShow:false,
               idPhoto:false,//证件照,
               scenePhoto:false,//现场照,
               canGetSceneImg:true,//是否获取现场照,配合人脸比对
           }
        },
        created(){
            tracking=window.tracking;
        },
        mounted(){
            var self=this;
            //计算video和canvas大小
            this.videoSize=this.$refs.video.offsetWidth;
            //预开启摄像头
            this.getDeviceAndBeginVideo();
            //监听身份证
            this.$electron.ipcRenderer.on("getIdCardInfo",(e,info)=>{
                if(info.photoBMP){
                    self.videoShow=true;
                    self.idPhoto="data:image/jpeg;base64,"+info.photoBMP;
                }
            })
            //监听人脸比对
            this.$electron.ipcRenderer.on("witnessResult",(e,arg)=>{
                //如果比对失败,canGetSceneImg需设置成true
                console.log(arg)
                if(arg.error_msg=="SUCCESS"){
                    //相识度
                    var similarity =arg.result.score;
                    //判断相似度
                    if(similarity>=80){
                        console.log("比对成功,相似度:"+similarity);
                    }else{
                        console.log("不是本人,相似度:"+similarity);
                    }
                }else{
                    self.canGetSceneImg=true;
                    console.log("比对失败:"+arg.error_msg);
                }
            })



            // //模拟读取身份证
            setTimeout(()=>{
                this.$electron.ipcRenderer.send("readIdCard");
            },2000);


        },
        methods:{
            getDeviceAndBeginVideo() {
                let self=this;
                navigator.mediaDevices.enumerateDevices()
                    .then(function(deviceList){
                        for (let i = 0; i !== deviceList.length; ++i){
                            let deviceInfo = deviceList[i];//每个设备的信息
                            self.videoinputArr.push(deviceInfo);
                        }
                        self.startVideo();
                    }).catch(function(error){
                    console.log("获取设备列表失败"+error)
                });
            },
            //打开摄像头
            startVideo() {
                let self = this;
                navigator.mediaDevices.getUserMedia({
                    video: {deviceId: self.videoinputArr.length>0 ? self.videoinputArr[0].deviceId : undefined},
                    audio:false
                }).then(function (stream) {
                        self.videoStream=stream;
                        self.$refs.video.srcObject=stream;
                        self.startTracking();
                    }).catch(function (error) {
                    console.log("摄像头打开失败"+error);
                });
            },
            //关流
            stopVideo(){
                if(this.videoStream){
                    this.videoStream.getTracks().forEach(track => {
                        track.stop();
                    });
                    this.videoStream=null;
                }
            },

            //开始人脸识别
            startTracking(){
                    var self=this;
                    var canvas =this.$refs.canvas;
                    if(!canvas){return false;}
                    var context = canvas.getContext('2d');
                    //检测人脸
                    var tracker=new tracking.ObjectTracker(['face']);
                    tracker.setInitialScale(4);
                    tracker.setStepSize(2);
                    tracker.setEdgesDensity(0.1);
                    //激活
                    trackerTask =tracking.track('#video', tracker,{camera:true});
                    tracker.on('track',function (event) {
                        context.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
                        if(event.data.length  === 0)
                        {

                        }
                        else
                        {
                            if(!self.videoShow){return false};
                            //获取现场照
                            self.getSceneImg();
                            //遍历人脸数据
                            event.data.forEach(function(rect)
                            {
                                //在canvas中画框框
                                context.strokeStyle = 'rgb(0,255,255)';
                                context.strokeRect(rect.x, rect.y, rect.width, rect.height);
                                // context.font = '11px Helvetica';
                                // context.fillStyle = "#fff";
                                // context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
                                // context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);

                            });
                        }

                    });
            },
            //绘图现场照
            getSceneImg(){
                if(!this.canGetSceneImg){return false;}
                this.canGetSceneImg=false;
                var canvas=this.$refs.sceneCanvas;
                var video=this.$refs.video;
                let ctx=canvas.getContext("2d");
                canvas.width=video.offsetWidth;
                canvas.height=video.offsetHeight
                ctx.drawImage(video,0,0,canvas.width,canvas.height);
                let url=canvas.toDataURL('image/jpeg');
                this.scenePhoto=url;
                this.comparison();
            },
            //开始进行认证对比
            comparison(){
                var self=this;
                this.$electron.ipcRenderer.send("witness",{
                    idPhoto:self.idPhoto.replace("data:image/jpeg;base64,",""),
                    scenePhoto:self.scenePhoto.replace("data:image/jpeg;base64,","")
                });
            }
        },
        beforeDestroy(){
            this.$electron.ipcRenderer.removeAllListeners("getIdCardInfo")
            this.$electron.ipcRenderer.removeAllListeners("witnessResult")
            this.stopVideo();
            if(trackerTask){
                trackerTask.stop();
                trackerTask=null;
            }

        }
    }
</script>

<style scoped lang="scss">
    [v-cloak]{
        display: none;
    }
    #wrap{
        background: url("../../assets/images/witness/bg.png") no-repeat 0 0;
        background-size: 100% 100%;
    }
    .title{
        text-align: center;
        font-size:1rem;
        color: #ffffff;
        position: absolute;
        top:0.65rem;
        left:0;
        width: 100%;
    }
    .lineTop{
        width: 17.6rem;
        height: 2.85rem;
        position: fixed;
        top:0;
        left:0;
    }
    .lineBottom{
        width: 17.6rem;
        height: 2.85rem;
        position: fixed;
        bottom:0;
        right:0;
    }
    .contentArea{
        width: 100%;
        height:31.2rem;
        position: fixed;
        top:3.5rem;
        left:0;
    }
    .arc_lf{
        position: absolute;
        top:0;
        left:1.25rem;
        width: 9.7rem;
        height:100%;
    }
    .arc_rg{
        position: absolute;
        top:0;
        right:1.25rem;
        width: 9.7rem;
        height:100%;
    }
    .scale_top{
        position: absolute;
        top:-0.3rem;
        left:50%;
        width:19.55rem;
        height:0.95rem;
        margin-left: -9.775rem;
    }
    .scale_bottom{
        position: absolute;
        bottom:-0.3rem;
        left:50%;
        width:19.55rem;
        height:0.95rem;
        margin-left: -9.775rem;
    }
    .humb_curve{
        position: absolute;
        bottom:5.2rem;
        left:3rem;
        width: 8.45rem;
        height: 2.7rem;
    }
    .curve_line{
        width: 15.75rem;
        height:5.35rem;
        position: absolute;
        bottom:-1.15rem;
        left:2.7rem;
    }
    .close{
        background-color:rgba(255,255,255,0.12);
        border-radius: 9999px;
        width:1.8rem;
        height:1.8rem;
        position: fixed;
        top:0.5rem;
        right:0.5rem;
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
    }
    .close:hover{
        background-color:rgba(255,255,255,0.3);
    }
    .setting{
        background-color:rgba(255,255,255,0.12);
        border-radius: 9999px;
        width:1.8rem;
        height:1.8rem;
        position: fixed;
        top:0.5rem;
        right:3.15rem;
       img{
           display: block;
           width: 100%;
           height: 100%;
       }
    }
    .setting:hover{
        background-color:rgba(255,255,255,0.3);
    }
    .witnessContext{
        width: 19.55rem;
        height:100%;
        margin:0 auto;
        position: absolute;
        top:0;
        left:50%;
        margin-left:-9.775rem;
        .light_bot{
            width: 29.05rem;
            height: 21.2rem;
            position: absolute;
            bottom:0;
            left:-4.75rem;
        }
        .decorate_40{
            width: 6.15rem;
            height:5.85rem;
            position: absolute;
            top:3.65rem;
            left:-4rem;
        }
        .decorate_70{
            width:5.3rem;
            height:5rem;
            position: absolute;
            bottom:9rem;
            right: -0.8rem;
        }
    }
    .videoWrap{
        background: url("../../assets/images/witness/circle_b.png") no-repeat 0 0;
        background-size: 100% 100%;
        width: 18.2rem;
        height:18.2rem;
        margin:2.55rem auto 0;
        border-radius: 999rem;
        padding:2.5rem;
        .video{
            width: 100%;
            height:100%;
            border: solid 0.1rem #00ffff;
            border-radius: 999rem;
            overflow: hidden;
            position: relative;
            .defaultp{
                display: block;
                width: 100%;
                height:100%;
                position: relative;
                z-index: 99;
            }
            #video{
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            #canvas{
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                top:0;
                left:0;
                z-index: 10;
            }
        }
    }
    .idPhoto{
        width: 9rem;
        height: 11rem;
        border: solid 0.05rem rgb(0,255,255);
        position: absolute;
        top:12.75rem;
        left:-10.25rem;
        &.noPhoto{
            border: solid 0.05rem rgba(0,255,255,0.3);
        }
        .circle_photo_line{
            position: absolute;
            width: 3.85rem;
            height: 1.85rem;
            right:-3.2rem;
            top:-1.1rem;
            transform:rotateY(180deg);
        }
        .default_face{
            display: block;
            width: 100%;
            height:100%;
        }
        .idPhotoImg{
            display: block;
            width: 100%;
            height: 100%;
        }
        .arrowRight{
            width: 1.85rem;
            height:0.85rem;
            position: absolute;
            top:-1.3rem;
            left:4.45rem;
            animation: arrowRightAni 1s infinite;
        }
        @keyframes arrowRightAni{
             0%,100%{
                 transform: translateX(0);
             }
             40%{
                 transform: translateX(0.5rem);
             }
        }

    }
    .scenePhoto{
        width: 9rem;
        height: 11rem;
        border: solid 0.05rem rgb(0,255,255);
        position: absolute;
        top:12.75rem;
        right:-10.25rem;
        &.noPhoto{
            border: solid 0.05rem rgba(0,255,255,0.3);
        }
        .circle_photo_line{
            position: absolute;
            width: 3.85rem;
            height: 1.85rem;
            left:-3.2rem;
            top:-1.1rem;
        }
        .default_face{
            width: 100%;
            height:100%;
            display: block;
        }
        .scenePhotoImg{
            display: block;
            width: 100%;
            height: 100%;
        }
        .arrow_left{
            width: 1.85rem;
            height:0.85rem;
            position: absolute;
            top:-1.3rem;
            right:4.45rem;
            animation: arrowLeftAni 1s infinite;
        }
        @keyframes arrowLeftAni{
            0%,100%{
                transform: translateX(0rem);
            }
            40%{
                transform: translateX(-0.5rem);
            }
        }
    }
    #sceneCanvas{
        display: none;
    }
</style>